// 无边距
<template>
  <!-- 打印 -->
  <div style="width:660px;height: 260px;position: relative;">
    <div id='printBill'>
      <div style="font-size: 14px;color: #000000;width:660px;height: 260px;position: relative;font-family:'宋体'">
        <!-- <div style="position: absolute;left:48px;top: 63px;">{{ infoValue.year }}</div>
        <div style="position: absolute;left:148px;top: 63px;">{{ infoValue.month }}</div>
        <div style="position: absolute;left:198px;top: 63px;">{{ infoValue.day }}</div> -->
        <div style="position: absolute;left:48px;top: 61px;">{{ infoValue.year }}</div>
        <div style="position: absolute;left:148px;top: 61px;">{{ infoValue.month }}</div>
        <div style="position: absolute;left:198px;top: 61px;">{{ infoValue.day }}</div>
        <div style="position: absolute;left:140px;top: 85px;">{{ infoValue.customerName }}</div>
        <div style="position: absolute;left:140px;top: 105px;">{{ infoValue.customerAddress }}</div>
        <!-- <div style="position: absolute;left:400px;top: 98px;">{{ infoValue.cardNumber }}</div> -->
        <div style="position: absolute;left:420px;top: 98px;">{{ infoValue.cardNumber }}</div>
        <div style="position: absolute;left:68px;top: 155px;height:84px">
          <div v-for="(item, index) in infoValue.nameList" :key="index" style="width:100px;height: 15px">{{
            item }}</div>
        </div>
        <div style="position: absolute;left:268px;top: 155px;height:84px">
          <div v-for="(item, index) in infoValue.priceList" :key="index" style="width:100px;height: 15px">{{ item }}</div>
        </div>
        <div style="position: absolute;left:360px;top: 155px;height:84px">
          <div v-for="(item, index) in infoValue.quantityList" :key="index" style="width:100px;height: 15px">{{ item }}
          </div>
        </div>
        <div style="position: absolute;left:440px;top: 155px;height:84px">
          <div v-for="(item, index) in infoValue.amountList" :key="index" style="width:80px;height: 15px">{{ item }}</div>
        </div>
        <!-- <div style="position: absolute;left:130px;top: 235px">{{ infoValue.amountInWords }}</div> -->
        <div style="position: absolute;left:130px;top: 237px">{{ infoValue.amountInWords }}</div>
        <!-- <div style="position: absolute;left:100px;top: 320px">{{ infoValue.checker }}</div>
        <div style="position: absolute;left:250px;top: 320px">{{ infoValue.payee }}</div> -->
        <!-- <div style="position: absolute;left:400px;top: 315px">{{ infoValue.drawer }}</div> -->
        <div style="position: absolute;left:430px;top: 325px">{{ infoValue.drawer }}</div>
      </div>


    </div>
  </div>
</template>

<script>
import printJS from 'print-js'
export default {
  props: ['info'],
  data() {
    return {
      infoValue: {
        customerName: '',
        year: '',
        month: "",
        day: "",
        customerAddress: '',
        cardNumber: '',
        nameList: [],
        priceList: [],
        quantityList: [],
        amountList: [],
        amountInWords: '',
        checker: '',
        payee: '',
        drawer: ""
      }
    }
  },
  mounted() {
    this.billPrintClick()
  },
  watch: {
    info: {
      deep: true,
      handler(newVal, oldVal) {
        this.infoValue = newVal
        console.log(newVal, 999999999999)
        console.log(newVal.nameList)
      },
      immediate: true
    },
  },

  methods: {
    //打印
    billPrintClick() {
      let that = this
      setTimeout(function () {
        const focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);
        const style = '@page {margin:0 10mm};'//打印时去掉眉页眉尾
        printJS({
          printable: 'printBill',// 标签元素id
          type: 'html',
          header: '',
          targetStyles: ['*'],
          scanStyles: false,//打印必须加上，不然页面上的css样式无效
          style,
          onPrintDialogClose: () => {
            console.log('挤奶了')
            that.$emit('closeMethod')
            clearInterval(focuser);
          }
        });
      }, 100)
    },
  },
}
</script>
<style scoped >
@page {
  size: auto;
  margin: 8mm;
}
</style>